<template>
  <div>

    <div class="box">
      <van-nav-bar title="地图导视" left-text="返回" left-arrow @click-left="$router.back()" />
      <van-tabs v-model:active="active" animated #default @click-tab="onClickTab">
        <van-tab v-for="item in kindList" :title="item" :key="item">
        </van-tab>

      </van-tabs>
      <!-- 地图 -->
      <van-image
        src="https://img.zcool.cn/community/01a4106115cda211013eaf70b0f296.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100">
      </van-image>
      <!-- 宫格 -->
      <van-grid :column-num="2">
        <van-grid-item v-for="value in list.type" :key="value"  :text="value" />
      </van-grid>
    </div>
  </div>
</template>

<script setup>
import { ref,watch } from 'vue'
import { getMapList } from '@/api/map'
import { showToast } from 'vant';

const active = ref(0)
const kindList = ref([])
const list = ref([])


getMapList().then(res => {
  // console.log(res.data);
  list.value = res.data.data[active.value+1]
  kindList.value = res.data.data[0].kind
  // console.log(kindList.value);
})
// 监控active的变化
watch(active,()=>{
  getMapList().then(res => {
  //console.log(res.data);
  list.value = res.data.data[active.value+1]

  // console.log('list的值',list.value);
})
})


</script>
 
<style lang="scss" scoped></style>